import { VFC, useRef, useState } from "react";
import { getFileMd5 } from 'zw-components';
import { Input } from 'antd';
export const DragContainer: VFC = (props) => {
    const onDragOver = (e: any) => {
        console.log(e)
    }
    const onStop = (e: any) => {
        e.stopPropagation();
        e.preventDefault();
    }
    const fileInputRef: any = useRef<HTMLInputElement>();
    const onClick = () => {
        fileInputRef.current.click();
    }
    const fileChange = (e: any) => {
        console.log(e.target.files)
        getFileMd5(e.target.files[0]).then(res => {
            console.log(res);
        })
    }
    return (
        <>
            <input type="file" multiple onChange={fileChange} ref={fileInputRef} style={{width: '1px', height: '1px', position: "absolute", top: '-1000px'}}/>
            <div style={{width: '300px', height: '300px', border: '1px solid red'}} onClick={onClick} onDragOver={onStop} onDragEnd={onStop} onDrop={onDragOver}></div>
        </>
        
    );
}